<template>
  <u-popup :show="isShow" round="8" @close="onClose">
    <view>
      <view
        style="
          padding: 0 12px;
          margin-top: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <text style="font-size: 15px">背景样式</text>
        <u-icon
          name="checkbox-mark"
          size="28"
          @click="confirm"
          style="margin-left: 12px"
        ></u-icon>
      </view>
      <u-tabs
        @click="onClick"
        :list="[
          {
            name: '颜色',
          },
          {
            name: '图片',
          },
        ]"
        style="margin-bottom: 15px"
      >
      </u-tabs>
      <t-color-picker
        v-show="selectedIndex === 0"
        :color="getRgbaColor"
        ref="colorPicker"
      ></t-color-picker>
    </view>
  </u-popup>
</template>
<script>
import tColorPicker from "@/components/t-color-picker/t-color-picker.vue";
import { store } from "../../../../../../main";

export default {
  data() {
    return {
      selectedIndex: 0,
    };
  },
  components: {
    tColorPicker,
  },
  props: {
    isShow: {
      type: Boolean,
    },
  },
  computed: {
    getRgbaColor() {
      let hexColor = store.state.bgColor.slice(1);
      // 解析RGB部分
      var r = parseInt(hexColor.slice(0, 2), 16);
      var g = parseInt(hexColor.slice(2, 4), 16);
      var b = parseInt(hexColor.slice(4), 16);
      return {
        r,
        g,
        b,
        a: 1,
      };
    },
  },
  methods: {
    onClick(item) {
      this.selectedIndex = item.index;
      if (item.index === 1) {
        this.$emit('openImage')
      }
    },
    onClose() {
      this.$emit("cancel");
      this.selectedIndex = 0;
    },
    confirm() {
      this.$emit("confirm", this.$refs.colorPicker.hex);
    },
  },
};
</script>
